<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>转换数组</button>
    <script>
        // arr.push(元素1，元素2...) 向数组末尾添加一个或多个元素，参数可以为任何数据类型。
        // 返回值为该数组的新长度，改变原数组
        /* const arr = [5, 8, 6, 2, 9]
        console.log(arr.push('1',0)); // 7
        console.log(arr); // [5, 8, 6, 2, 9, '1', 0] */

        // 手写push方法
        /* Array.prototype.mypush = function(...args) {
            if(!this.length) this.length = 0
            for(let i = 0;i < args.length;i++) {
                this[this.length] = args[i]
            }
            return this.length
        }
        const arr = [5, 8, 6, 2, 9]
        console.log(arr.mypush('1',0))
        console.log(arr) */


        // arr.unshift(元素1，元素2...) 向数组开头添加一个或多个元素
        // 返回值为该数组的新长度，改变原数组
        /* const arr = [5, 8, 6, 2, 9]
        console.log(arr.unshift(0, 1)); // 7
        console.log(arr); // [0, 1, 5, 8, 6, 2, 9] */

        // 手写unshift方法
        /* Array.prototype.myunshift = function(...args) {
            if(!this.length) this.length = 0
            for(let i = args.length - 1;i >= 0;i--) {
                for(let i = this.length - 1;i >= 0;i--) {
                    this[i+1] = this[i]
                }
                this[0] = args[i]
            } 
            return this.length
        }
        const arr = [5, 8, 6, 2, 9]
        console.log(arr.myunshift(0, 1));
        console.log(arr); */


        // arr.pop() 删除数组中的最后一个元素
        // 返回值为该元素的值，改变原数组
        /* const arr = [5, 8, 6, 2, 9]
        console.log(arr.pop()); // 9
        console.log(arr); // [5, 8, 6, 2] */

        // 手写pop方法
        /* Array.prototype.mypop = function() {
            if(!this.length) return undefined
            let num = this[this.length-1]
            this.length = this.length - 1
            return num
        }
        const arr = [5, 8, 6, 2, 9]
        console.log(arr.mypop());
        console.log(arr); */


        // arr.shift() 删除数组中的第一个元素
        // 返回值为该元素的值，改变原数组
        // const arr = [5, 8, 6, 2, 9]
        /* console.log(arr.shift()); // 5
        console.log(arr); // [8, 6, 2, 9] */

        // 手写shift方法
        /* Array.prototype.myshift = function() {
            if(!this.length) return undefined
            const firstNum = this[0]
            for(let i = 0;i < this.length ;i++) {
                this[i] = this[i+1]
            }
            this.length = this.length - 1
            return firstNum
        }
        const arr = [5, 8, 6, 2, 9]
        console.log(arr.myshift());
        console.log(arr); */


        // 切换数组元素
        /* const btn = document.querySelector('button')
        btn.addEventListener('click',function() {
            const first = arr.shift()
            arr.push(first)
            console.log(arr);
        }) */


        // arr.reverse() 将数组的元素进行反转
        // 返回值为反转后的新数组，改变原数组
        /* const arr = [5, 8, 6, 2, 9]
        const newArr = arr.reverse()
        console.log(newArr); */

        // 手写reverse方法
        /* Array.prototype.myreverse = function() {
            // 把数组复制一次
            let arr1 = Array.from(this)
            for(let i = 0;i < this.length;i++) {
                this[this.length-1-i] = arr1[i]
            }
            return this
        }
        const arr = [5, 8, 6, 2, 9]
        const newArr = arr.myreverse()
        console.log(newArr); */


        // arr.join('分隔符')  把数组转换成字符串，以自定义的分隔符隔开
        // 返回的是转换后的字符串，不改变原数组
        /* const arr = [5, 8, 6, 2, 9]
        console.log(arr.join('')); // '58629'
        console.log(arr.join('→')); // '5→8→6→2→9'
        console.log(arr); // [5, 8, 6, 2, 9] */

        // string.split('') 把一个字符串分割成字符串数组
        /* const str = 'Hello'
        const arr = str.split('')
        console.log(arr); // ['H', 'e', 'l', 'l', 'o']
        const arr1 = str.split(',')
        console.log(arr1); // ['Hello'] */


        // 反转字符串
        /* const str = 'Hello'
        const str1 = str.split('').reverse().join('')
        console.log(str1); // 'olleH' */


        // arr.splice() 可以对数组进行增删改，改变原数组
        // 1.删除：arr.splice(起始下标[，删除的个数]) 如果删除的个数省略，从起始下标删除到末尾。
        // 返回的是删除的元素的数组
        /* const arr = [5, 8, 6, 2, 9]
        console.log(arr.splice(3)); // [2,9]
        console.log(arr); // [5, 8, 6] */

        // 2.增加：arr.splice(起始下标，0，添加的新元素) 删除个数为0，将添加的新元素插入到起始下标对应元素的前面
        // 返回的是空数组
        /* const arr = [5, 8, 6, 2, 9]
        console.log(arr.splice(3,0,1)); // []
        console.log(arr); // [5, 8, 6, 1, 2, 9] */

        // 3.修改：arr.splice(起始下标，n，替换的新元素) 从起始下标开始删除n个元素，新元素替换删除的部分
        // 返回的是删除的元素的数组
        /* const arr = [5, 8, 6, 2, 9]
        console.log(arr.splice(3,2,1,2,3)); // [2, 9]
        console.log(arr); // [5, 8, 6, 1, 2, 3] */

        // 手写splice方法
        /* Array.prototype.mysplice = function(start,n,...args) {
            if(!n) n = this.length - start
            let newArr = []
            for(let i = start;i < this.length; i++) {
                if(i < start + n) {
                    newArr.push(this[i])
                }
                this[i] = this[i + n]
            }
            this.length = this.length - n
            if(args.length) {
                for(let i = start; i < this.length; i++) {
                    this[i + args.length] = this[i]
                }
                for(let i = 0;i < args.length; i++) {
                    this[i + start] = args[i]
                }
            }
            return newArr
        }
        const arr = [5, 8, 6, 2, 9]
        console.log(arr.mysplice(3));
        console.log(arr); */
        // end

        // arr.slice(start下标[，end下标]) 从start下标截取至end下标(包含start下标元素但不包含end下标的元素)
        // 如果end下标省略，从start下标截取到末尾
        // 如果arr.slice(0或者为空) 输出原数组的内容，可以实现数组浅拷贝
        // arr.slice(-start，-end) 从最后一项开始算起，-1为最后一项，-2为倒数第二项
        // 返回：截取的元素以新数组形式返回，不改变原数组
        /* const arr = [5, 8, 6, 2, 9]
        console.log(arr.slice(3,4)); // [2]
        console.log(arr.slice(3)); // [2, 9]
        console.log(arr.slice()); // [5, 8, 6, 2, 9]
        console.log(arr.slice(0)); // [5, 8, 6, 2, 9]
        console.log(arr); // [5, 8, 6, 2, 9]
        console.log(arr.slice(-1)); // [9]
        console.log(arr.slice(-2,-1)); // console.log(arr.slice(-2,4));  // [2]
        console.log(arr.slice(-2)); // [2, 9] */

        // 手写slice方法
        /* Array.prototype.myslice = function(start = 0,end = this.length) {
            if(arguments.length === 1) {
                start = arguments[0]
            } else if (arguments.length === 2) {
                start = arguments[0]
                end = arguments[1]
            }
            let newArr = []
            for(let i = start; i < end; i++) {
                newArr.push(this[i])
            }
            return newArr
        }
        const arr = [5, 8, 6, 2, 9]
        console.log(arr.myslice(0));
        console.log(arr); */
        // end


        // arr.concat(arr1,arr2...) 将两个或两个以上的数组合并成一个数组
        // 返回合并后的新数组
        // 不改变原数组
        /* const arr = [5, 8, 6, 2, 9]
        const arr1 = [1, 3, 4, 7]
        console.log(arr.concat(arr1)); // [5, 8, 6, 2, 9, 1, 3, 4, 7]
        console.log(arr); // [5, 8, 6, 2, 9]
        console.log(arr1); // [1, 3, 4, 7] */


        // arr.sort() 对数组中的元素进行排序，接收一个回调函数，传递两个参数
        // 返回的是排序后的新数组
        // 改变原数组
        /* const arr = [5, 8, 6, 2, 9]
        arr.sort((a,b) => {
            // return b - a  // 从大到小 [9, 8, 6, 5, 2]
            return a - b  // 从小到大 [2, 5, 6, 8, 9]
        })
        console.log(arr); */
        // 将数组中state:true的一条数据移动到第一项
        /* const list = [
            {name: '前端',state: false},
            {name: '后端',state: true},
            {name: '大数据',state: false},
        ]
        list.sort((a,b) => {
            return b.state - a.state
        })
        console.log(list); */


        // arr.indexOf(item[,开始检测的位置索引]) 检测当前值在数组中第一次出现的位置索引
        // 返回第一次查到的索引，未找到返回-1
        // 不改变原数组
        /* const arr = [5, 8, 6, 2, 9, 2]
        console.log(arr.indexOf(2)); // 3
        console.log(arr.indexOf(1)); // -1
        console.log(arr); // [5, 8, 6, 2, 9, 2] */

        // indexOf数组去重
        // const arr = [5, 8, 6, 2, 9, 2, 6]
        // const newArr = []
        // arr.forEach(item => {
        //     if(newArr.indexOf(item) === -1) {
        //         newArr.push(item)
        //     }
        // })
        // console.log(newArr); // [5, 8, 6, 2, 9]
        
    </script>
</body>

</html>